<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>COVID19 疫情统计图表</title>
    <!-- 引入 ECharts 文件 -->
    <script src="echarts.min.js"></script>
    <script src="jquery-1.8.0.js"></script>
</head>

<body>

    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="main" style="width: 800px;height:600px;"></div>
    <div>
        <input id='country' value='China' />
        <button id='search'>点击查询</button>
    </div>
    <div id="pcMain" style="width: 800px;height:750px;"></div>
</body>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var acChart = echarts.init(document.getElementById('main'));
    var pcChart = echarts.init(document.getElementById('pcMain'));

    // 指定图表的配置项和数据
    var acOption = {
        title: {
            text: '所有国家最新数据统计',
            subtext: '',
            left: 'center'
        },
        tooltip: {
            trigger: 'item'
        },
        series: [
            {
                name: '最近一日统计',
                type: 'pie',
                radius: '50%',
                data: [
                ],
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    var pcOption = {
        
        title: {
            text: '最新数据统计',
            subtext: '',
            left: 'center'
        },
        legend: {
            top: 'bottom'
        },
        toolbox: {
            show: true,
            feature: {
                mark: { show: true },
                dataView: { show: true, readOnly: false },
                restore: { show: true },
                saveAsImage: { show: true }
            }
        },
        tooltip: {
            trigger: 'item'
        },
        label: {
            show: false
        },
        emphasis: {
            label: {
                show: true
            }
        },
        series: [
            {
                name: '省份数据',
                type: 'pie',
                radius: [50, 250],
                center: ['50%', '50%'],
                roseType: 'area',
                itemStyle: {
                    borderRadius: 8
                },
                data: [
                ]
            }
        ]
    };
    $.get("/stats/country", function (res) {
        let data = res.data;
        let opData = [];
        for (let k in data) {
            opData.push({ name: k, value: data[k] })
        }
        acOption.series[0].data = opData;
        acChart.setOption(acOption);
    });
    $('#search').click(() => {
        let c =$('#country').val();
        $.get("/stats/province/" + c, function (res) {
            pcOption.title.text = c+'最新数据统计';
            let data = res.data;
            let opData = [];
            for (let k in data) {
                opData.push({ name: k, value: data[k] })
            }
            pcOption.series[0].data = opData;
            pcChart.setOption(pcOption);
        });
    })
</script>

</html>